<template>
	<view class="regiest">
		<view class="title">
			手机号注册
		</view>
		<view class="area">国家/地区 中国+86</view>
		<view class="phone">
			<input type="number" placeholder="请输入手机号" maxlength="11" v-model.trim="phone">
		</view>
		<view class="password">验证码</view>
		<view class="pasw">
			<input type="text" placeholder="请输入验证码">
			<text @tap="getCode">{{codeTime}}</text>
		</view>
		<view class="password">密码</view>
		<view class="pasword">
			<input type="text" placeholder="请输入密码" v-model.trim="password">
		</view>
		<view class="noteCode">密码格式为6-16数字，字母或符号，不允许有空格</view>
		<view class="loginBtn" @tap="goUploadAvatar">完成并登陆</view> 
	</view>
</template>

<script>
	import http from '../../request.js';
	export default {
		data() {
			return {
				codeTime:'获取验证码',
				phone:'',
				password:''
			}
		},
		created (){
			console.log(http)	
		},
		methods: {
			goPasswordLogin (){
				uni.navigateTo({
					url:'/pages/passwordLogin/passwordLogin'
				})
			},
			goUploadAvatar (){
				uni.navigateTo({
					url:'/pages/uploadAvatar/uploadAvatar'
				})
			},
			//获取验证码
			getCode (){
				var reg=/^[1][3,4,5,7,8][0-9]{9}$/;
				if(this.phone==''){
					uni.showToast({
						icon:'none',
						title:"请输入手机号"
					})
					return;
				}
				if(!reg.test(this.phone)){
					uni.showToast({
						icon:'none',
						title:"手机号不正确"
					})
					return;
				}
				if(this.codeTime!='获取验证码') return;
				let num=60;
				let time= setInterval(() =>{
					if(num==1){
						clearInterval(time);
						this.codeTime='获取验证码';
						return;
					}
					num--;
					this.codeTime= num +'s后重新获取'
				},1000 )
				http._post('/api/login/register',{
					type:1,
					phone:this.phone
				}).then(res =>{
					console.log(res,'注册')
					
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.regiest{
	width: 100%;
	height: 100%;
	background-color: #fff;
	padding-left: 55rpx;
	box-sizing: border-box;
	.title{
		font-size:46rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:#333;
		margin-top:125rpx;
	}
	.area{
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:#666666;
		margin-top:85rpx;
	}
	.phone{
		width: 635rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #F2F2F2;
		line-height: 80rpx;
		padding-left:20rpx;
		input{
			margin-top: 40rpx;
			width: 100%;
			font-size: 32rpx;
			height: 100%;
			&:placeholder{
				font-size: 20rpx;
				color: #999;
			}
		}
	}
	.loginBtn{
		width:635rpx;
		background:#ED2C61;
		color:#fff;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		margin-top:80rpx;
	}
	.password{
		color:#333333;
		font-size: 32rpx;
		padding: 30rpx 0;
	}
	.pasw{
		width: 635rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #F2F2F2;
		line-height: 80rpx;
		padding-left:20rpx;
		display: flex;
		justify-content: flex-start;
		input{
			width: 65%;
			font-size: 32rpx;
			height: 100%;
			margin-right: 20rpx;
			&:placeholder{
				font-size: 20rpx;
				color: #999;
			}
		}
		text{
			color:#ED2C61;
			font-size: 24rpx;
			display: inline-block;
			width: 35%;
			text-align: center;
		}
	}
	.password{
		color:#333333;
		font-size: 32rpx;
		padding: 30rpx 0;
	}
	.pasword{
		width: 635rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #F2F2F2;
		line-height: 80rpx;
		padding-left:20rpx;
		input{
			width: 100%;
			font-size: 32rpx;
			height: 100%;
			&:placeholder{
				font-size: 20rpx;
				color: #999;
			}
		}
	}
	.noteCode{
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(102,102,102,1);
		margin-top:30rpx;
		color:#999;
	}
	
}
</style>
